<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惠农通 - 员工管理</title>
    <link rel="icon" href="./assets/logo.ico" type="images/x-ico" />
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="admin-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="logo">
                <img src="assets/logo.png" alt="惠农通">
                <h2>惠农通</h2>
            </div>
        </div>
        <nav class="sidebar-menu">
            <ul>
                <li data-page="dashboard">
                    <i class="fas fa-chart-line"></i>
                    <span>数据概览</span>
                </li>
                <li class="active" data-page="employees">
                    <i class="fas fa-users"></i>
                    <span>员工管理</span>
                </li>
                <li data-page="expert">
                    <i class="fas fa-user-tie"></i>
                    <span>专家管理</span>
                </li>
                <li  data-page="farm-management">
                    <i class="fas fa-warehouse"></i>
                    <span>农场管理</span>
                </li>
                <li data-page="product">
                    <i class="fas fa-box-open"></i>
                    <span>产品管理</span>
                </li>
                <li data-page="order">
                    <i class="fas fa-shopping-cart"></i>
                    <span>订单管理</span>
                </li>
                <li data-page="ai-chat">
                    <i class="fas fa-robot"></i>
                    <span>AI问答</span>
                </li>
                <li data-page="activities">
                    <i class="fas fa-tractor"></i>
                    <span>农业活动</span>
                </li>
                <li data-page="settings">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </li>
            </ul>
        </nav>
        <div class="sidebar-footer">
            <button class="logout-btn" id="logoutBtn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </button>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <header class="main-header">
            <h1 id="pageTitle">员工管理</h1>
            <div class="user-info">
                <span class="welcome">欢迎，<span id="currentUser">管理员</span></span>
                <div class="avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
            </div>
        </header>


        <!-- 员工管理页面 -->
        <div id="employeesPage" class="page-content">
            <div class="page-toolbar">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchName" placeholder="输入姓名搜索">
                    <button class="search-btn" id="searchBtn">搜索</button>
                </div>
                <button class="primary-btn" id="addEmployeeBtn">
                    <i class="fas fa-plus"></i> 新增员工
                </button>
            </div>

            <div class="table-container">
                <table id="employeeTable">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div class="loading-overlay" id="loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            </div>

            <div class="pagination-wrapper">
                <div class="pagination-controls">
                    <button class="page-btn" id="prevPageBtn">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </button>
                    <span class="page-info" id="currentPage"></span>
                    <button class="page-btn" id="nextPageBtn">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </button>
                    <select class="page-select" id="pageSize">
                        <option value="10">每页10条</option>
                        <option value="20">每页20条</option>
                        <option value="50">每页50条</option>
                    </select>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 员工表单模态框 -->
<div id="employeeModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3 id="modalTitle">新增员工</h3>
            <button class="close-btn" id="closeModalBtn">&times;</button>
        </div>
        <form id="employeeForm" class="modal-body">
            <input type="hidden" id="employeeId">
            <div class="form-group">
                <label for="modalUsername">用户名</label>
                <input type="text" id="modalUsername" placeholder="输入用户名" required>
            </div>
            <div class="form-group">
                <label for="modalName">姓名</label>
                <input type="text" id="modalName" placeholder="输入姓名" required>
            </div>
            <div class="form-group">
                <label for="modalPhone">手机号</label>
                <input type="tel" id="modalPhone" placeholder="输入手机号" required>
            </div>
            <div class="form-group">
                <label for="modalSex">性别</label>
                <select id="modalSex" required>
                    <option value="">选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="modalIdNumber">身份证号</label>
                <input type="text" id="modalIdNumber" placeholder="输入身份证号" required>
            </div>
            <div class="form-actions">
                <button type="button" class="secondary-btn" id="cancelModalBtn">
                    <i class="fas fa-times"></i> 取消
                </button>
                <button type="submit" class="primary-btn">
                    <i class="fas fa-save"></i> 保存
                </button>
            </div>
        </form>
    </div>
</div>

<script src="js/common.js"></script>
<script src="js/employees.js"></script>
</body>
</html>